<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>two</title>
</head>
<body>
  <div>two</div>
  <button id="two-btn">open one</button>
  <div class="receiveMsg">等待接收...</div>
  <script>
    window.name="twoPage"
    window.addEventListener('message', (e) => {
      console.log('two get!', e.data, e.origin, e.source.name)
    })
    // 给父级frame发消息
    // if(window.top.name === "threePage"){
      // console.log('top', window.top);
      // window.top.postMessage({
      //   msg:'from two'
      // }, 'http://127.0.0.1:5500')
     
    // }
     /**
       *  MessageChannel
       * */
      // const port2 = window.parent.customChannel.port2;
      // port2.onmessage = (e) => {
      //   console.log('two get msg:', e.data)
      // }
      // port2.postMessage('two said to three using port2')
    // 点击按钮给one发消息
    document.getElementById('two-btn').addEventListener('click', () => {
      const onePage = window.open('http://127.0.0.1:5501/demo/one.html', "onePage")
      setTimeout(() => {
        onePage.postMessage({
          msg:'from two'
        })
      }, 1000)
    })
    /**
     * BroadcastChannel
     * */
    const channel = new BroadcastChannel('mychannel');
    channel.onmessage = (e) => {
      document.querySelector('.receiveMsg').innerHTML = e.data
    }
  </script>
</body>
</html>